<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>
  <script src="http://www.yanhuangxueyuan.com/threejs/examples/js/controls/OrbitControls.js"></script>
  <title>koa应用</title>
</head>
<body>
  <script>
    /**
     * 创建场景对象Scene
     */
    var scene = new THREE.Scene();
    /**
     * 创建网格模型
     */
    // var geometry = new THREE.SphereGeometry(60, 40, 40); //创建一个球体几何对象
    var geometry = new THREE.BoxGeometry(900, 1, 900); //立方体几何对象Geometry
    var sphere = new THREE.SphereGeometry(200,200,200); //球体对象Geometry
    var geometry2 = new THREE.BoxGeometry(100, 100, 100); //立方体
    var geometry3 = new THREE.CylinderGeometry( 10, 10, 500, 25 );//圆柱体

    //设置材质
    var material = new THREE.LineBasicMaterial({
      color: 0x8888ff,
      // opacity:0.7,
      // transparent:true
    }); //材质对象Material
    var material2 = new THREE.PointsMaterial({
      color: 0x0000ff, //颜色
      size: 3, //点渲染尺寸
    });
    var material3 = new THREE.MeshLambertMaterial({
      color: 0x5555ff,
    }); 
    var material4 = new THREE.MeshLambertMaterial({
      color: 0xFFFFFF,
    });

    
    var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
    var mesh2 = new THREE.Points(sphere, material2); //网格模型对象Mesh
    var mesh3 = new THREE.Mesh(geometry2, material3); //网格模型对象Mesh
    var mesh4 = new THREE.Mesh(geometry3, material4); //网格模型对象Mesh
    mesh2.position.set(0,100,0);//设置mesh3模型对象的xyz坐标为120,0,0
    mesh3.position.set(400,50,0);//设置mesh3模型对象的xyz坐标为120,0,0
    mesh4.position.set(-400,250,0);//设置mesh3模型对象的xyz坐标为120,0,0

    // 设置产生投影的网格模型
    mesh.castShadow = true;
    var planeGeometry = new THREE.PlaneGeometry(3000, 2000);
    var planeMaterial = new THREE.MeshLambertMaterial({
      color: 0x777777
    });
    // 平面网格模型作为投影面
    // var planeMesh = new THREE.Mesh(planeGeometry, planeMaterial);
    // scene.add(planeMesh); //网格模型添加到场景中
    // planeMesh.rotateX(-Math.PI / 2); //旋转网格模型
    // planeMesh.position.y = -150; //设置网格模型y坐标
    // // 设置接收阴影的投影面
    // planeMesh.receiveShadow = true;

    scene.add(mesh); //网格模型添加到场景中
    scene.add(mesh3); //网格模型添加到场景中
    scene.add(mesh4); //网格模型添加到场景中

    //复制模型
    var meshClone = mesh3.clone()
    meshClone.position.set(100,50,100);//设置mesh3模型对象的xyz坐标为120,0,0

    scene.add(meshClone);
    var material3 = new THREE.MeshStandardMaterial({
      color: 0x999999,
    }); 
    var cylinder = new THREE.CylinderGeometry( 2, 2, 100, 25 );

    
      /**
       * 创建旋转网格模型
       */
      // var points = [
      //     new THREE.Vector2(50,60),
      //     new THREE.Vector2(25,0),
      //     new THREE.Vector2(50,-60)
      // ];
      // var geometry = new THREE.LatheGeometry(points,30);
      // var material7=new THREE.MeshPhongMaterial({
      //     color:0x0000ff,//三角面颜色
      //     side:THREE.DoubleSide//两面可见
      // });//材质对象
      // // material7.wireframe = true;//线条模式渲染(查看细分数)
      // var mesh7=new THREE.Mesh(geometry,material7);//旋转网格模型对象
      // scene.add(mesh7);//旋转网格模型添加到场景中
    
    /**
     * 光源设置
     */
    //点光源
    var point = new THREE.PointLight(0xffffff);
    point.position.set(900, 900, 900); //点光源位置
    scene.add(point); //点光源添加到场景中
    //环境光
    var ambient = new THREE.AmbientLight(0x555555);
    scene.add(ambient);
    /**
     * 相机设置
     */
    var width = window.innerWidth; //窗口宽度
    var height = window.innerHeight; //窗口高度
    var k = width / height; //窗口宽高比
    var s = 3000; //三维场景显示范围控制系数，系数越大，显示的范围越大
    //创建相机对象
    var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
    camera.position.set(300, 300, 300); //设置相机位置
    camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
    /**
     * 创建渲染器对象
     */
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height);//设置渲染区域尺寸
    renderer.setClearColor(0xffffff, 1); //设置背景颜色
    document.body.appendChild(renderer.domElement); //body元素中插入canvas对象

    function render() {
      renderer.render(scene,camera);//执行渲染操作
      // mesh.rotateX(0.01);//每次绕y轴旋转0.01弧度
    }
    render()
    var controls = new THREE.OrbitControls(camera,renderer.domElement);//创建控件对象
    controls.addEventListener('change', render);//监听鼠标、键盘事件
 
  </script>
</body>
<style>
  html,body{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }
.test_page{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: cornflowerblue;
  color: aliceblue;
}
</style>
</html>